<template>
    <div>
        <el-page-header @back="goback" title="详情配置">
        </el-page-header>
    </div>
    <el-descriptions direction="vertical" size="large" :column="2" border>
        <el-descriptions-item label="名称">
            <el-input size="large" v-model="datas.name">
                {{ datas.name }}
            </el-input>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间" :span="2">
            <el-tag> {{ datas.createTime }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="发布">
            <el-tag type="danger" v-if="(datas.isPublish == 1)">否</el-tag>
            <el-tag v-else type="success">是</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="禁用" :span="2">
            <el-tag type="danger" v-if="(datas.isBan == 0)">是</el-tag>
            <el-tag v-else type="success">否</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="权限" width="1">
            <el-tree :data="dataes" :props="defaultProps" :default-checked-keys="checked" node-key="id" show-checkbox @check-change="rightchange" />
        </el-descriptions-item>
        <el-descriptions-item label="组织" :span="2" width="1">
            <el-tree :data="datatree" :props="defaultPropstwo" node-key="id" show-checkbox @check-change="zuzhichange">

                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <template v-if="CheckedData.length > 0">
                            <template v-for="item in CheckedData">
                                <template v-if="data.id == item.oid">
                                    <el-tag :key="item2.id" v-for="item2 in item.children" size="mini"
                                        style="margin-left:10px">{{ item2.name
                                        }}</el-tag>
                                </template>
                            </template>
                        </template>
                    </span>
                </template>
            </el-tree>
        </el-descriptions-item>
        <el-descriptions-item label="操作">
            <el-button type="primary" @click="qxpzxg">修改</el-button>
        </el-descriptions-item>
    </el-descriptions>
    <el-dialog title="选择组织·职务" :closeOnClickModal="false" draggable v-model="dialogzuzhiVisible" v-if="dialogzuzhiVisible"
        :destroy-on-close="true" :show-close="true" width="60%">
        <el-skeleton :rows="8" :loading="zuzhiload" animated>
            <div id="treeA">
                <el-tag type="info" size="large">tips:选择全部则代表后续添加进来的职务也会包含,
                    而全部单个选中所有职务则不会包含后续职务</el-tag>
                <div class="mytable" style="margin-top:10px;text-align: left;">
                    <el-checkbox-group v-model="checkList">
                        <template v-for="item in list">
                            <el-checkbox style="width:100px;margin-left:10px;margin-top: 10px;" :key="item.id"
                                v-if="item.isBan == 0" :label="item.id">{{ item.name
                                }}</el-checkbox>
                        </template>
                    </el-checkbox-group>
                </div>
                <div class="mytable" style="margin-top:10px;text-align:left" v-show="show == true">
                    <div>
                        <label>以下职务不可选,因为该组织的这些职务已经使用</label>
                    </div>
                    <template v-for="item in list">
                        <el-tag :key="item.id" v-if="item.isBan == 1" style="margin-top:10px;margin-left:10px" type="info"
                            size="mini">{{ item.name
                            }}</el-tag>
                    </template>
                </div>
                <el-button style="margin-top:30px" id="btn" :disabled="checkList.length == 0" type="primary"
                    @click="certain" size="mini">
                    确认
                </el-button>

            </div>
        </el-skeleton>
    </el-dialog>
</template>
<script lang="ts">
import router from '@/router'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { getRights, getNotConfigZhiwuByOrg, getConfigDisabledOrg, getSingleRightConfig, updateRightConfig } from '../../../api/Right/config/index'
import { GetOrganizations } from '../../../api/user/user'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
interface typedata {
    datas: any,
    page: number,
    dataes: any,
    defaultProps: any,
    datatree: any,
    defaultPropstwo: any,
    orgs: any,
    rids: any,
    checkList: [],
    list: any,
    dialogzuzhiVisible: boolean,
    zuzhiload: boolean,
    show: boolean,
    CheckedData: any,
    id: any,
    data:any,
    checked:any
}
export default defineComponent({
    setup() {
        const data = reactive<typedata>({
            datas: {
                name: '',
                createTime: '',
                isPublish: 0,
                isBan: 0,
            },
            page: 1,
            //权限数据
            dataes: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            //组织(该配置会适用的组织)数据
            datatree: [],
            defaultPropstwo: {
                children: 'children',
                label: 'name'
            },
            orgs: [],//组织(该配置会适用的组织)
            rids: [],//权限
            checkList: [],
            list: [] as any[],
            dialogzuzhiVisible: false,
            zuzhiload: false,
            show: true,
            CheckedData: [],
            id: '',
            data:[],
            checked:[]
        })

        const Route = useRoute();

        const events = {
            goback() {
                router.go(-1)
            },
            getdata() {
                getSingleRightConfig({
                    id: Route.query.id
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.datas = res.data
                        
                    }
                })
            },
            //权限数据
            tree() {
                getRights({
                    page: data.page,
                    limit: 999
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.dataes = res.data.data
                    }
                })
            },
            //组织(该配置会适用的组织)
            treetwo() {
                getConfigDisabledOrg({

                }).then((res: any) => {
                    data.orgs = res.data
                })
                setTimeout(() => {
                    GetOrganizations({
                        page: data.page,
                        limit: 999
                    }).then((res: any) => {
                        console.log('==========', res)
                        if (res.result == 0) {

                            data.datatree = res.data.data
                            events.digui(data.datatree)
                        }
                    })
                }, 800)

            },
            //递归
            digui(datad: any) {
                datad = Array.from(datad);
                datad.forEach((res: any) => {
                    if (data.orgs.find((d: any) => d == res.id) != undefined) {
                        res.disabled = true
                    }
                    events.digui(datad = res.children)
                })
            },
            //权限选中改变
            rightchange(datar: any, check: any) {
                datar.orgs = []
                datar.orgs = check.checkedKeys
            },
            //组织选中改变
            zuzhichange(obj: any, bool: any) {
                data.zuzhiload = true;
                console.log("obj", obj)
                console.log("bool", bool)
                if (bool == true) {
                    data.checkList = [];
                    getNotConfigZhiwuByOrg({ id: obj.id }).then((res: any) => {
                        console.log(res)
                        data.list = res.data;
                        var num = 0;
                        data.list.forEach((item: any) => {
                            if (item.isBan == 0) {
                                num += 1;
                            }
                        })
                        data.list.length > num ? data.show = true : data.show = false;
                        data.zuzhiload = false
                    })
                    data.id = obj.id;
                    data.CheckedData.push({
                        oid: obj.id,
                        oname: obj.name,
                        children: [],
                    })
                    data.dialogzuzhiVisible = true;
                } else {
                    if (data.CheckedData.length > 0) {
                        data.CheckedData.forEach((item: any, i: any) => {
                            if (item.oid == obj.id) {
                                data.CheckedData.splice(i, 1)
                            }
                        })
                    }
                }
            },
            //组织确认
            certain() {
                console.log(data.checkList);
                if (data.checkList.length > 0) {
                    data.checkList.forEach((item: any) => {
                        var CheckedData = data.CheckedData.find((d: any) => d.oid == data.id)
                        CheckedData.children.push(data.list.find((d: any) => d.id == item))
                    })
                }
                console.log(data.CheckedData);

                data.dialogzuzhiVisible = false;
            },
            //修改配置
            qxpzxg() {
                console.log('==========')
                ElMessageBox.confirm(
                    '你确定要修改吗?',
                    'Warning',
                    {
                        confirmButtonText: '是',
                        cancelButtonText: '否',
                        type: 'warning',
                    }
                ).then(() => {
                    var orgs: any = [];
                    var zwids: any = [];
                    data.CheckedData.forEach((item: any) => {
                        zwids = [];
                        item.children.forEach((item2: any) => {
                            zwids.push(item2.id);
                        })
                        orgs.push({
                            id: item.oid,
                            isAll: true,
                            zwids: zwids,
                        })
                    })
                    console.log("999999", orgs);
                    var obj = {
                        id: Route.query.id,
                        name: data.datas.name,
                        orgs: orgs,
                        rids: data.rids,
                    }
                    console.log("obj", obj);
                    updateRightConfig(obj).then((res: any) => {
                        if (res.result === 0) {
                            events.getdata();
                            ElMessage({
                                type: 'success',
                                message: '修改成功!'
                            });
                            router.push("/right/config");
                        } else {
                            ElMessage({
                                type: 'error',
                                message: res.message
                            });
                        }
                    })
                }).catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '操作已取消'
                    });
                });
            }
        }

        onMounted(() => {
            events.tree();
            events.treetwo();
            events.getdata();
        })

        return {
            ...toRefs(data),
            ...events
        }
    },
})
</script>
